import React from "react";

function SonA (props) {
  return (
    <div>
      父组件传递的参数(SonA)：{ props.JSX }--{ props.obj.a }--<button onClick={ props.func }>funcA</button>
    </div>
  )
}

class SonB extends React.Component {
  render() {
    return (
      <div>
        父组件传递的参数(SonB)：{ this.props.JSX }--{ this.props.obj.a }--<button onClick={ this.props.func }>funcB</button>
      </div>
    )
  }
}

function App () {
  function func() {
    console.log('this is a function');
  }
  return (
    <>
      <SonA JSX={ <span>this is JSX1</span> } obj={ { a: 1, b: 2 } } func={ func }></SonA>
      <SonB JSX={ <span>this is JSX2</span> } obj={ { a: 1, b: 2 } } func={ func }></SonB>
    </>
  )
}

export default App;
